<template>
  <VGroup class="w-[235px]">
    <el-select
      v-model="form.ono_type"
      placeholder="请选择"
      @change="handleTypeChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-input
      v-model="form.customer_order_no"
      @change="handleChange"
      placeholder="请输入单号"
      clearable
    />
  </VGroup>
</template>
<script setup>
const props = defineProps({
  value: { type: Object, default: () => {} },
});
const options = ref([
  { label: "OMS订单系统", value: 1 },
  {
    label: "头程备库单号",
    value: 2,
  },
]);
const emit = defineEmits(["input", "change"]);
const handleChange = () => {
  emit("change", { ...form.value });
};
const handleTypeChange = () => {
  form.value.customer_order_no = null;
  handleChange();
};
const form = ref({
  ono_type: 1,
  customer_order_no: null,
});
watch(
  () => form.value,
  (val) => {
    const { ono_type = null, customer_order_no = null } = val || {};
    emit("input", { ono_type, customer_order_no });
  },
  {
    deep: true,
  }
);
watch(
  () => props.value,
  (val) => {
    const { ono_type = null, customer_order_no = null } = val || {};
    form.value.ono_type = ono_type;
    form.value.customer_order_no = customer_order_no;
  },
  {
    deep: true,
  }
);
</script>
